<template>
  <view class="zdzcRecordDetailMain">
    <view class="zdzcRecordDetailBox">
      <view class="headerBox flex align-center justify-center">
        <view class="status flex align-center" v-if="detailData.status == 1">
          <view class="green flex align-center justify-center">
            <u-icon name="checkmark" color="#fff" size="30"></u-icon>
          </view>
          全部修改成功
        </view>
        <view class="status flex align-center" v-if="detailData.status == 0">
          <view class="red flex align-center justify-center">
            <u-icon name="close" color="#fff" size="30"></u-icon>
          </view>
          修改失败
        </view>
      </view>
      <view class="bodyBox">
        <view class="innerTitle flex align-center justify-center"
          ><text>机具费率</text></view
        >
        <view class="itemBox clearfix" style="min-height:388rpx">
          <view
            class="item"
            v-for="(item, index) in detailData.remark.f_info"
            :key="index"
          >
            <text>{{ item.val }}</text>
            {{ item.name }}
          </view>
        </view>
        <view
          class="innerTitle flex align-center justify-center"
          style="margin-top: 30rpx"
          ><text>机具政策</text></view
        >
        <!-- <view class="itemBox clearfix">
          <view class="item">
            <text>99</text>
            服务费押金(元)
          </view>
        </view> -->
        <view class="serviceFree flex align-center justify-center">
          {{detailData.remark.p_info}}
        </view>
      </view>
      <view class="footerBox">
        <view class="title">修改列表</view>
        <view class="terminalListBox">
          <view class="footerOne">
            <view class="top flex align-center justify-between">
              <view class="left flex align-center">
                <view class="leftTitle">
                  <text>终端序列号</text>
                </view>
                <view class="number">
                  <text>{{ detailData.title[0] }}</text>
                  <view class="flex align-center justify-center">
                    <u-icon
                      class="uIcon"
                      name="arrow-down"
                      color="#fff"
                      size="24"
                    ></u-icon>
                  </view>
                  <text>{{ detailData.title[1] }}</text>
                </view>
              </view>
            </view>
            <view class="sub flex align-center justify-between solid-top">
              <text v-if="detailData.status == 1">修改状态：全部修改成功</text>
              <text v-if="detailData.status == 0">修改状态：修改失败</text>
              <text>共{{ detailData.nums }}台</text>
            </view>
          </view>
          <view :class="[isAll ? 'footerTwo' : 'footerTwo isAll']">
            <view
              class="terminalItem solid-bottom"
              v-for="(item, index) in list"
              :key="index"
              >SN号：{{ item.objid }}</view
            >
            <view
              class="viewMore flex align-center justify-center"
              v-if="!isAll && list.length > 5"
              @tap="isAll = true"
              >查看更多<u-icon
                class="uIcon"
                name="arrow-down"
                color="#333"
                size="28"
              ></u-icon
            ></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isAll: false,
      id: "",
      detailData: {
        status: -1,
        remark: {
          f_info: [],
          p_info:""
        },
        title: [
          "********************",
          "********************"
        ],
        nums: 0,
      },
      list: [],
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getOperateData();
    this.getOperateDetailData();
  },
  onPullDownRefresh() {
    this.getOperateData();
    this.getOperateDetailData();
  },
  methods: {
    getOperateData() {
      this.$u.api
        .getOperate({
          id: this.id,
        })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            let remark = JSON.parse(datas.remark);
            let title = datas.title.split("->");
            datas.remark = remark;
            datas.title = title;
            this.detailData = datas;
          }
          uni.stopPullDownRefresh();
        });
    },
    getOperateDetailData() {
      this.$u.api
        .getOperateDetail({
          pid: this.id,
        })
        .then((res) => {
          if (res.status == 200) {
            if (res.result) {
              this.list = res.result;
            }
          }
          uni.stopPullDownRefresh();
        });
    },
  },
};
</script>
<style lang="scss">
.zdzcRecordDetailBox {
  .headerBox {
    padding: 40rpx;
    background: #fff;
    min-height:130rpx;
    .status {
      > view {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50rpx;
        margin-right: 20rpx;
        &.green {
          background: rgba(68, 181, 73, 1);
        }
        &.red {
          background: #f33;
        }
      }
    }
  }
  .bodyBox {
    padding: 30rpx;
    .innerTitle {
      font-size: 30rpx;
      width: 160rpx;
      margin: 0 auto;
      color: #333;
      font-weight: bold;
      padding: 0 10rpx;
      text-align: center;
      position: relative;
      margin-bottom: 40rpx;
      text {
        position: relative;
        z-index: 9;
      }
      &:after {
        content: "";
        display: block;
        width: 80%;
        height: 20rpx;
        background: rgba(249, 72, 52, 0.2);
        border-radius: 30rpx;
        position: absolute;
        left: 50%;
        bottom: -5rpx;
        margin-left: -40%;
      }
    }
    .itemBox {
      background: #fff;
      border-radius: 10rpx;
      padding: 20rpx;
      .item {
        width: 33.33333333%;
        text-align: center;
        float: left;
        font-size: 24rpx;
        padding: 20rpx 0;
        text {
          display: block;
          font-size: 28rpx;
          font-weight: bold;
          padding-bottom: 6rpx;
        }
      }
    }
    .serviceFree {
      background: #fff;
      border-radius: 10rpx;
      height: 80rpx;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
  .footerBox {
    padding: 0 30rpx 30rpx;
    .title {
      font-size: 30rpx;
      font-weight: bold;
    }
    .terminalListBox {
      background: #fff;
      margin-top: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      .footerOne {
        padding: 30rpx;
        background: #fb4535;
        color: #fff;
        .top {
          .left {
            .title {
              text {
                display: block;
                &:first-of-type {
                  position: relative;
                  top: -4rpx;
                }
                &:last-of-type {
                  font-size: 24rpx;
                }
              }
            }
            .number {
              padding-left: 40rpx;
              > text {
                font-weight: bold;
              }
            }
          }
          .right {
            .uIcon {
              position: relative;
              top: 4rpx;
            }
          }
        }
        .sub {
          margin-top: 20rpx;
          padding-top: 20rpx;
        }
      }
      .footerTwo {
        padding: 0 30rpx;
        position: relative;
        height: auto;
        &.isAll {
          max-height: 450rpx;
        }
        .terminalItem {
          line-height: 90rpx;
          &:last-of-type::after {
            border-bottom: none;
          }
        }
        .viewMore {
          height: 90rpx;
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 0;
          background: rgba(255, 255, 255, 0.9);
          .uIcon {
            margin-left: 10rpx;
          }
        }
      }
    }
  }
}
</style>